{% extends 'base.html' %}
{% block title %}节点{% endblock %}
{% block content %}
<div class="table-responsive-md">
    <table id="nodes-list" class="table">
        <thead>
        <tr>
            <th scope="col" class="text-nowrap text-center">启用</th>
            <th scope="col" class="text-nowrap">名称</th>
            <th scope="col" class="text-nowrap">描述</th>
            <th scope="col" class="text-nowrap">地址</th>
            <th scope="col" class="text-nowrap text-center">类别</th>
            <th scope="col" class="text-nowrap text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for node in nodes %}
        <tr data-role="node-primary">
            {% if node.enabled %}
            <td class="text-success text-nowrap text-center"><span class="oi oi-check"></span></td>
            {% else %}
            <td class="text-muted text-nowrap text-center"><span class="oi oi-x"></span></td>
            {% endif %}
            <td class="text-nowrap">{{ node.name }}</td>
            <td class="text-nowrap">{{ node.description }}</td>
            <td class="text-nowrap">{{ node.hostname }}</td>
            <td class="text-nowrap text-center">{{ node.bundle }}</td>
            <td class="text-nowrap text-center">
                <a class="btn btn-primary btn-sm" data-role="show-props"><span class="oi oi-spreadsheet icon" ></span>属性</a>
            </td>
        </tr>
        <tr data-role="node-props" style="display:none" class="table-light">
            <th scope="row" class="text-center"></th>
            <td colspan="5">
                {% if node.props %}
                <pre class="text-info">
            {% for prop_key, prop_value in node.props.items() %}
{{ prop_key }}: {{ prop_value }}
            {% endfor %}
            </pre>
                {% else %}
                <em class="text-warning">无额外参数。</em>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>
'use strict';
$('#search-form').submit(evt => {
    let v =  $(evt.target).combineFormValues('search-key');
    if (v) {
        window.location = 'index(' + encodeURIComponent(v) + ')';
    } else {
        window.location = 'index';
    }

    evt.preventDefault();
});
$('#nodes-list .btn[data-role=show-props]').click(evt => {
    const btn = $(evt.target);
    const row = btn.parents('tr').first();
    const nrow = row.next('tr');

    btn.addClass('disabled');
    nrow.show()

/*
    if (!nrow.is(':visible')) {
        btn.removeClass('oi-plus').addClass('oi-minus');
        row.addClass('table-primary');
        nrow.show();
    } else {
        btn.removeClass('oi-minus').addClass('oi-plus');
        row.removeClass('table-primary');
        nrow.hide();
    } */

    evt.preventDefault();
});

</script>
{% endblock %}
